<template>
  <el-page-header>
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >
          <router-link to="/manager/mangerindex" class="menu-router">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item
        ><router-link to="/manager/commentmanage" class="menu-router">评论区管理</router-link></el-breadcrumb-item
        >
      </el-breadcrumb>
    </template>
    <template #content>
      <span class="text-large font-600 mr-3"> 评论区管理 </span>
    </template>
  </el-page-header>
  <el-table :data="currentPageItems" style="width: 100%">
    <el-table-column fixed prop="comment" label="评论内容" width="120" />
    <el-table-column prop="commentTime" label="评论时间" width="100" />
    <el-table-column prop="rating" label="评分" width="100" />
    <el-table-column prop="userId" label="评论者id" width="100" />
    <el-table-column prop="itemId" label="评论菜品id" width="120"/>
    <el-table-column prop="isreply" label="商家是否已回复" width="120"/>
    <el-table-column prop="weight" label="评论权重" width="120"/>
    <el-table-column prop="isdelete" label="状态" width="600" >
      <template #default="{ row }">
        <span :style="{ color:row.color, fontWeight: 'bold' , fontSize: '15px', fontFamily: 'Arial, sans-serif'}">{{ row.isdelete}}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120" >
      <template #default="{row}">
        <el-button link type="primary" size="small" class="el-button1" @click="showdiglog1s(row)" v-if="row.isclick">商家回复评论</el-button>
        <el-button link type="primary" size="small" @click="updatecommentweight(row)">将评论置顶</el-button>
        <el-button link type="primary" size="small" @click="deletcomment(row)">{{row.button}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      small
      background
      layout="prev, pager, next"
      :total="totalItems"
      :page-size="pageSize"
      v-model:currentPage="currentPage"
      class="mt-4"
  />
  <el-dialog title="商家回复评论" v-model="showdilog1">
    <el-input v-model="comment" placeholder="请输入商家回复内容" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showdilog1 = false">取 消</el-button>
        <el-button type="primary" @click="replyusercomment()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import {deletcommentservice, getcallcommenrService, replyusercommentservice, updateweightservice} from "@/api/food.js";
import {ElMessage} from "element-plus";
const showdilog1=ref(false);
const itemId=ref();
const pid=ref();
const comment=ref("");
const currentPage = ref(1); // 当前页数
const pageSize = ref(10);
const tableData = reactive([]);
onMounted(() => {
  getallcomment();
});
const getallcomment = async () => {
  const response = await getcallcommenrService();
  if (response.code === 200) {
    tableData.splice(0, tableData.length); // 清空原有数据
    response.date.forEach((item) => {
      item.isclick=true
      if (item.isdelete === 0) {
        item.button = "封禁评论";
        item.isdelete = "状态正常";
        item.color = "green";
      }
      if (item.isdelete === 1) {
        item.button = "解封评论";
        item.isdelete = "状态封禁";
        item.color = "red";
      }
      if(item.isreply===0){
        item.isreply="未回复";
        item.isclick=true
      }
      if(item.isreply===1){
        item.isreply="已回复";
        item.isclick=false
      }  if(item.isreply===2){
        item.isreply="管理员回复";
        item.isclick=false
      }
      item.commentTime=formatDateTime(item.commentTime);
      tableData.push(item);
    });
    ElMessage.success("评论获取成功");
  }
};
const currentPageItems = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return tableData.slice(startIndex, endIndex);
});
const totalItems = computed(() => tableData.length);

const formatDateTime = (dateTimeStr) => {
  const date = new Date(dateTimeStr);
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
};
const showdiglog1s = (row) => {
  showdilog1.value=true;
  itemId.value=row.itemId;
  pid.value=row.id;
}
const replyusercomment = async () => {
  const response = await replyusercommentservice(comment.value,pid.value,itemId.value);
  if (response.code === 200) {
    showdilog1.value=false;
  await  getallcomment();
  ElMessage.success("评论回复成功")
  }
  else {
    ElMessage.error("评论回复失败")
  }

}

const updatecommentweight =async (row) => {

  const response = await updateweightservice(row.id,row.itemId);
  if (response.code === 200) {
    await getallcomment();
    ElMessage.success("评论权重更新成功")
  }
else {
    ElMessage.error("评论权重更新失败")
  }
}
const deletcomment =async (row) => {
  const response = await deletcommentservice(row.id);
  if (response.code === 200) {
    await getallcomment();
    ElMessage.success("评论删除成功")
  }
  else {
    ElMessage.error("评论删除失败")
  }

}
</script>

<style scoped>
.el-button1{
  margin-left: 13px;
}
</style>
